import { Component } from '@angular/core';
import {SideNavService} from "../../service/side-nav.service";
import {Subscription} from "rxjs";
import {animate, state, style, transition, trigger} from "@angular/animations";

@Component({
  selector: 'app-manager-side-nav',
  templateUrl: './manager-side-nav.component.html',
    styleUrls: ["../../../assets/css/manager/bootstrap.css",
        "../../../assets/css/manager/font-awesome.css",
        "../../../assets/css/manager/morris-0.4.3.min.css",
        "../../../assets/css/manager/custom-styles.css",
        "../../../assets/css/manager/google.css"
    ],
    animations: [
        trigger('openClose', [
            // ...
            state('open', style({
                marginLeft: '0px',
            })),
            state('closed', style({
                marginLeft: '-260px',
            })),
            transition('open => closed', [
                animate('0.3s ease-in-out')
            ]),
            transition('closed => open', [
                animate('0.3s ease-in-out')
            ]),
        ]),
    ],
})
export class ManagerSideNavComponent {
    isSideNavClosed = false;
    private subscription: Subscription;

    constructor(private sideNavService: SideNavService) {
        this.subscription = this.sideNavService.isSideNavClosed$.subscribe(isClosed => {
            this.isSideNavClosed = isClosed;
        });
    }
    toggleSideNav() {
        this.sideNavService.toggleSideNav(!this.isSideNavClosed);
    }
}
